<template>
  <div class="page-container">
    <div class="welcome-container">
    <h1 class="title">专业问答：专注于高分子材料改性领域</h1>
    <div class="default-text">{{ welcomeMsg }}</div>
    <h1 class="title">特殊场景</h1>
    <div class="main-container">
      <div class="welcome-box">
        <template v-for="(item, index) in contentList" :key="index">
          <div v-if="item.status === 1" class="welcome-item"
            @click="handleClick(item)">
            <div class="welcome-item-icon">
              <img v-if="item.iconUrl" class="iconUrl" :src="item.iconUrl" />
           
            </div>
            <div class="welcome-item-content">
              <div class="welcome-item-title">{{ item.title }}</div>
              <div  class="welcome-item-description"> {{ item.description }}</div>

              
            </div>
 
          </div>
        </template>

      </div>
    </div>
    <div class="footer-container" :style="{ marginTop: contentList?.length > 4 ? '40px' : '48px' }">
      <div class="chat-box">
        <div v-if="selectVisible" class="button-list" ref="target">
          <div v-for="item in answerTypeList" :key="item.value" class="answerTypeItem" @click="selectAnswerType(item)">
            <img class="answerTypeIcon" :src="getImgUrl(`static/image/${item.value}-icon.png`)" />
            {{ item.label }}
          </div>
        </div>
        <div v-else class="button-list singleTypeItem">
          <div class="answerTypeItem" @click="onClickAnswerBtn">
            <img class="answerTypeIcon" :src="getImgUrl(`static/image/${answerType.value}-icon.png`)" />
            {{ answerType.label }}
          </div>
        </div>
        <a-textarea v-model:value="chatValue" autosize placeholder="请分享您的研究场景、技术难点或创新设想，我们可以深入探讨解决方案。"
          style="margin-left: 90px;flex: 1;line-height: 30px;" :bordered="false" @keyup.enter="sendMessage" />
        <div class="btn-send" type="primary" @click="sendMessage"></div>
      </div>
      <div class="footer-text">
        以上内容均由AI生成,仅供参考和借鉴
      </div>
    </div>
  </div>
  </div>

</template>

<script lang="ts" setup>
import { onMounted, ref, defineEmits } from 'vue';
import { apiCopilotWelcomeAdminList, apiCopilotWelcome } from '@/api/manage'
import { getImgUrl } from '@/utils/index'
import { type GuideItem } from '@/api/type'
import { onClickOutside } from '@vueuse/core'
defineOptions({
  name: 'WelcomeContainer'
})
interface delautItem {
  label?: string,
  value?: string,
  type?: number
}
const emit = defineEmits(['sendMessage', 'receiveWelcome'])
const contentList = ref<GuideItem[]>([])
const selectVisible = ref(false)
const answerTypeList = ref<delautItem[]>([
  {
    label: '即答',
    value: 'immediately',
    type: 0
  }, {
    label: '全部',
    value: 'all',
    type: 1
  }, {
    label: '论文',
    value: 'paper',
    type: 2
  }, {
    label: '专利',
    value: 'patent',
    type: 3
  }
])
const answerType = ref<delautItem>({
  label: '全部',
  value: 'all',
  type: 1
})
const chatValue = ref('')
const sendMessage = () => {
  console.log(chatValue.value)
  if (!chatValue.value) return

  emit('sendMessage', { title: chatValue.value, type: answerType.value })
}
const welcomeMsg = ref('')
const getWelcomeMsg = async () => {
  const { data: { entity = {} } } = await apiCopilotWelcome({ type: 1 })
  welcomeMsg.value = entity?.content || ''
}
const getList = async () => {
  apiCopilotWelcomeAdminList({ type: 3, pageNum: 1, pageSize: 8 }).then(({ data: { entity = {} } }) => {
    contentList.value = entity.rows || []
  })
}
const onClickAnswerBtn = () => {
  selectVisible.value = true
}
const selectAnswerType = (data: delautItem) => {
  console.log(data)
  answerType.value = data
  selectVisible.value = false
}
const handleClick = async (item: GuideItem) => {
  console.log(item)
  emit('receiveWelcome', item)
}
const target = ref(null)
onClickOutside(target, () => {
  selectVisible.value = false
})
onMounted(() => {
  getList()
  getWelcomeMsg()
})
</script>

<style lang="scss" scoped>
.page-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  .welcome-container {
    width: 800px;
  .main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    
  }

  .footer-container {
    position: fixed;
    bottom: 8px;

    .footer-text {
      color: #9A9EAB;
      text-align: center;
      margin-top: 8px;
    }
  }

  .title {
    color: #292929;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 16px;
    margin-top: 36px;
  }
  .default-text{
    background: #fff;
    padding: 20px;
    line-height: 24px;
    font-size: 14px;
    color: #292929;
    margin-bottom: 24px;
  }

  .button-list {
    border: 1px solid #DBDEE2;
    border-radius: 8px;
    z-index: 100;
    bottom: 0;
    background: #fff;
    bottom: 10px;
    left: 10px;
    position: absolute;
    z-index: 1;

    .answerTypeItem {
      cursor: pointer;
      // margin-bottom: 12px;
      height: 36px;
      display: flex;
      align-items: center;
      padding: 0 12px;
    }

    .answerTypeIcon {
      width: 20px;
      height: 20px;
      margin-right: 6px;
    }
  }

  .welcome-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;

    .welcome-item {
      width: 392px;
      background-color: #fff;
      border-radius: 12px;
      display: flex;
      cursor: pointer;
      padding: 12px 20px;

      .welcome-item-content {
        font-size: 14px;

        .welcome-item-title {
          font-weight: 500;
          color: #292929;
          margin-left: 12px;
        }
        .welcome-item-description {
          color: #646464;
          margin-left: 12px;
        }
      }

      .welcome-item-icon {
        background: #fff;
        padding: 12px 0;
        display: flex;
        align-items: center;

        .iconUrl {
          width: 32px;
          height: 32px;
        }


      }
    }
  }

  .chat-box {
    display: flex;
    border-radius: 8px;
    background: #FFFFFF;
    margin-top: 48px;
    box-shadow: 10px 4px 20px 0px rgba(112, 124, 151, 0.03);
    padding: 10px;
    position: relative;
    width: 800px;

    .btn-send {
      background-image: url('@/static/image/send-active.png');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      width: 40px;
      height: 40px;
      cursor: pointer;
    }
  }
}
}

</style>